<template>
	<view class="add-member">
		<view class="add-form">
			<view class="row">
				<view class="row-title">店主账号</view>
				<view class="mobile-row">
					<input class="input mobile" placeholder-class="input-placeholder" placeholder="请输入用户平台注册手机号"
						type="text" v-model="formData.mobile" />
					<view class="mobile-butt" @click="checkMobile">检测</view>
				</view>
				<view class="mobile-check" v-if="checkResult && checkResult.code == 0">
					<view class="check-result">检测成功！</view>
					<view class="user-name">用户昵称：{{checkResult.data.nickname}}</view>
				</view>
				<view class="mobile-check" v-if="checkResult && checkResult.code != 0">
					<view class="check-result">{{checkResult.message}}</view>
				</view>
			</view>
			<view v-if="checkResult && checkResult.code == 0">
			<!-- <view > -->
				<view class="row">
					<view class="row-title">上级店主账号（可不填）</view>
					<input class="input name" placeholder-class="input-placeholder" placeholder="请输入上级店主账号" type="text" v-model="formData.sup_mobile"/>
				</view>
				<view class="row">
					<view class="row-title">店主名称</view>
					<input class="input name" placeholder-class="input-placeholder" placeholder="请输入店主名称" type="text" v-model="formData.fenxiao_name"/>
				</view>
				<view class="row">
					<picker mode="selector" :range="levelList" range-key="level_name" @change="changeLevel">
						<view class="">
							<view class="row-title">店主等级</view>
							<view class="input select">
								<view class="">{{levelTarget.level_name || '请选择店主等级'}}</view>
							</view>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<button class="submit" :disabled="!submitable" @click="addTeamMembers" type="default">添加</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkResult:'',
				formData:{
					mobile:'',
					fenxiao_name:'',
					sup_mobile:'',
					level_id:''
				},
				levelList:[],
				levelTarget:{}
			};
		},
		computed:{
			submitable(){
				for(let i in this.formData){	
					if (i == 'sup_mobile') {
						continue;
					}
					if(!this.formData[i]){
						return false
					}
				}
				return true
			},
		},
		methods:{
			checkMobile() {
				this.$api.sendRequest({
					url: '/city/api/index/testingUser',
					data: {
						type: 'fenxiao',
						phone: this.formData.mobile
					},
					success: res => {
						this.checkResult = res;
						this.levelList = res.data.level;
					}
				});
			},
			changePosition(e){
				this.formData.type = e.detail.value;
			},
			changeLevel(e){
				console.log(e.detail.value)
				let target = this.levelList[e.detail.value];
				console.log(target)
				this.levelTarget = target;
				this.formData.level_id = target.level_id;
			},
			addTeamMembers() {
				this.$api.sendRequest({
					url: '/city/api/index/addPromoter',
					data: {
						...this.formData
					},
					success: res => {
						if (res.code == 0) {
							this.$util.showToast({
								title: '添加成功',
								success: () => {
									setTimeout(() => {
										this.$util.redirectTo('/businesscenter/index', {}, 'redirectTo');
									}, 1000);
								}
							});
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../common/css/mixins.scss';

	.add-member {}

	.add-form {
		background-color: #fff;
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 8rpx;
	}

	.row {
		margin-bottom: 48rpx;

		.row-title {
			margin-bottom: 24rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #000000;
			line-height: 46rpx;
		}
	}

	.mobile-row {
		@include flex(space-between);
		background: #F8F8F8;
		border-radius: 8rpx;

		.mobile-butt {
			@include flex;
			width: 128rpx;
			height: 72rpx;
			border-radius: 8rpx;
			font-size: 28rpx;

			background: #FF4544;
			color: #FFFFFF;
			line-height: 40rpx;
		}
	}

	.input {
		padding: 0 30rpx;
		height: 72rpx;
		background: #F8F8F8;
		border-radius: 8px;
		font-size: 28rpx;
		color: #303133;

		&.mobile {}

		&.name {}

		&.select {
			@include flex(space-between);
			&::after {
				content:'';
				@include image('icon-arrow-top.png');
				width: 32rpx;
				height: 32rpx;
				transform: rotate(180deg);
			}
		}
	}

	/deep/.input-placeholder {
		color: #909399;
	}

	.mobile-check {
		@include flex(flex-start);
		margin-top: 24rpx;

		.check-result,
		.user-name {
			font-size: 28rpx;
			color: #FF4544;
			line-height: 40rpx;
		}

		.user-name {
			color: #909399;
		}
	}

	.row-radios {
		margin-top: 43rpx;
	}

	.radio-position {
		&:first-child {
			margin-right: 106rpx;
		}

		.position-name {
			font-size: 28rpx;
			color: #606266;
			line-height: 40rpx;
		}
	}

	.submit {
		@include flex;
		margin: 0;
		position: fixed;
		bottom: 0;
		left: 0;
		border-radius: 0;
		width: 750rpx;
		height: 88rpx;
		background: #FF4544!important;
		font-size: 28rpx;
		color: #FFFFFF!important;
		line-height: 40rpx;
		&[disabled]{
			opacity: 0.3;
		}
	}
</style>
